<template>
  <div>
    <p class="tip">请输入正确的工位编号(如 5F001)</p>
    <div class="num-wrapper">
      <div class="num-box">
        <div class="num">
          <span v-show="No[0]">{{No[0]}}</span>
        </div>
        <div class="num">
          <span v-show="No[1]">{{No[1]}}</span>
        </div>
        <div class="num">
          <span v-show="No[2]">{{No[2]}}</span>
        </div>
        <div class="num">
          <span v-show="No[3]">{{No[3]}}</span>
        </div>
        <div class="num">
          <span v-show="No[4]">{{No[4]}}</span>
        </div>
      </div>
      <input
        type="text"
        class="input-num"
        v-model="inpNo"
        @keyup="inpNo=inpNo.replace(/[^\w\/]/ig,'')"
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'InputNum',
  props: {
    No: String
  },
  data() {
    return {
      inpNo: '',
      timer: null
    }
  },
  watch: {
    inpNo() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        if (this.inpNo.length >= 5) {
          this.inpNo = this.inpNo.substr(0, 5).toUpperCase()
        } else {
          this.inpNo = this.inpNo.toUpperCase()
        }
        this.$emit('change', this.inpNo)
      }, 50)
    }
  },
  mounted() {
    this.inpNo = this.No
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.tip
  margin: 0.4rem 0;
  text-align: center;
  font-size: 0.3rem;
  color: $lightGray;
.num-wrapper
  width: 5.1rem;
  margin: 0 auto;
  position: relative;
  .num
    width: 0.78rem;
    height: 1.1rem;
    margin-right: 0.3rem;
    background: $grayText;
    color: $white;
    text-align: center;
    line-height: 1.1rem;
    float: left;
    font-size: 0.6rem;
    border-radius: 5px;
    &:last-child
      margin-right: 0;
  .input-num
    position: absolute;
    width: 100%;
    height: 1.1rem;
    top: 0;
    left: 0;
    opacity: 0;
    color: transparent;
</style>
